<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<image class="top_box_left" src="/static/30.png" mode="" @click="$fh"></image>
				<view class="top_box_title">确认订单</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
		</view>

		<view class="con">
			<view class="box info">
				<view class="info_top">
					<view class="info_top_left">
						<view class="info_top_left_title">入住日期</view>
						<view class="info_top_left_text">{{ cityStore.month_day_1 }}至{{ cityStore.month_day_2 }}</view>
					</view>
					<view class="info_top_right">
						共{{ cityStore.dayDiff }}晚
						<image class="info_top_right_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
				<view class="info_text">
					{{ detail.czleixing }}·{{ detail.mianji }}㎡·{{ detail.shi }}室·宜住{{ detail.renshu }}人
				</view>
				<view class="info_btn" @click="open">
					预计在30分钟内可以免费取消
					<image class="info_btn_img" src="/static/55.png" mode=""></image>
				</view>
			</view>

			<view class="tip">
				<image class="tip_img" src="/static/56.png" mode=""></image>
				<view class="tip_title">友情提示：如需发票请线下联系房东！</view>
			</view>

			<view class="box">
				<view class="box_title">
					入住人信息
					<view class="box_title_text">
						已选
						<span class="span">{{ cityStore.stay.length }}</span>
						人
					</view>
				</view>
				<view class="user">
					<view class="user_nr" v-for="(item, index) in cityStore.stay" :key="index">
						<view class="user_nr_title">{{ item.name }} {{ item.idcard }}</view>
						<view class="user_nr_del" @click="stay_del(item, index)">删除</view>
					</view>

					<view class="user_add" @click="to_guest">
						<image class="user_add_img" src="/static/57.png" mode=""></image>
						添加/编辑
					</view>
				</view>
			</view>

			<!-- 订单金额 -->
			<view class="box amount">
				<view class="box_title">订单金额</view>
				<view class="amount_top">
					<view class="amount_top_left">
						房费
						<span class="span">{{ cityStore.dayDiff }}</span>
						晚
					</view>
					<view class="amount_top_right">
						¥{{ zprice }}
						<image class="amount_top_right_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
				<view class="amount_list" v-if="riqi.length > 0">
					<view class="amount_list_nr" v-for="(day, i) in riqi" :key="i">
						<view class="amount_list_nr_title">{{ day.time }}</view>
						<view class="amount_list_nr_title">¥{{ day.price }}</view>
					</view>
				</view>

				<view class="amount_btn" @click="to_coupon">
					<view class="amount_btn_left">优惠券</view>
					<view class="amount_btn_right">
						<span v-if="cityStore.yh">-¥{{ cityStore.yh }}</span>

						<image class="amount_btn_right_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
			</view>

			<!-- 温馨提示 -->
			<view class="box">
				<view class="box_title">温馨提示</view>
				<view class="notice">14:00-24:00入住，12:00之前需退房（以当地城市时区为主）</view>
				<view class="agreement">
					<view>预订协议：</view>
					我同意
					<span class="span" @click="to_text(3)">《服务协议》</span>
					<span class="span" @click="to_text(4)">《房客规则》</span>
					<span class="span" @click="to_text(5)">《住宿旅行意外险告知书》</span>
					及房东规定得退订入住要求。
				</view>
			</view>

			<!-- 底部支付栏 -->
			<view class="btn">
				<view class="btn_box">
					<view class="btn_box_left">
						<view class="btn_box_left_title">
							您需支付
							<view class="span">¥{{ zprice }}</view>
						</view>
						<view class="btn_box_left_text" v-if="yhprice">已优惠 ¥{{ yhprice }}</view>
					</view>
					<view class="btn_box_right" @click="submit">
						<view class="btn_box_right_title">去支付</view>
						<view class="btn_box_right_text" v-if="cityStore && cityStore.month_day_1">
							{{ date_text(cityStore.month_day_1) }}-{{ date_text(cityStore.month_day_2) }} 共{{ cityStore.dayDiff }}晚
						</view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="popup" type="center" background-color="#fff" border-radius="10px" @change="popup_change">
			<view class="popup_box">
				<view class="popup_box_top">退订规则</view>
				<view class="popup_box_list">
					<view class="popup_box_list_nr">
						<span class="popup_box_list_nr_zw"></span>
						预订成功30分钟内可免费取消；
					</view>
					<view class="popup_box_list_nr">
						<span class="popup_box_list_nr_zw"></span>
						<span class="span">{{ cityStore.month_day_1 }}14:00</span>
						前可免费取消；
					</view>
					<view class="popup_box_list_nr">
						<span class="popup_box_list_nr_zw"></span>
						若未入住或过时取消将扣除100%房费；
					</view>
				</view>
				<view class="popup_box_btn" @click="close">好的，我知道了</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { useCityStore } from '@/utils/cityStore.js'
	const cityStore = useCityStore()
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	let status = ref(1)
	let id = ref(0)
	let detail = ref({})
	let riqi = ref([])
	let tprice = ref('')
	let price = ref('')
	let zprice = ref('')
	let coupon_price = ref('')
	let yhprice = ref(0)
	let show = ref(false)
	let popup = ref(null)

	const stay_del = (item, index) => {
		cityStore.stay.splice(index, 1)
		cityStore.stay_id.splice(index, 1)
	}

	const popup_change = (e) => {
		show.value = e.show
	}
	const open = () => {
		popup.value.open()
	}
	const close = () => {
		popup.value.close()
	}
	const date_text = (value) => {
		return value.replace('月', '.').replace('日', '')
	}

	const submit = () => {
		if (
			validateFields([
				{
					value: cityStore.stay.length > 0,
					message: '请选择入住人'
				}
			])
		)
			return

		http
			.post('/srapi/home/wxpay', {
				xinxi: cityStore.stay,
				coupon_id: cityStore.yh_id,
				coupon_price: cityStore.yh,
				price: zprice.value,
				yhprice: yhprice.value,
				fyid: detail.value.id,
				ktime: cityStore.formatted[0],
				jtime: cityStore.formatted[1],
				jiwan: cityStore.dayDiff,
				tprice: tprice.value
			})
			.then((res) => {
				console.log('返回值', res)
				let wdata = res.data.wdata
				pay_data(wdata)
			})
			.catch((error) => {
				console.log('返回值error', error)
				uni.showToast({
					mask: true,
					title: error.msg,
					icon: 'none',
					duration: 800
				})
			})
	}
	const pay_data = (wdata) => {
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp: String(wdata.timeStamp),
			nonceStr: wdata.nonceStr,
			package: wdata.package,
			signType: wdata.signType,
			paySign: wdata.sign,
			success: function (res) {
				console.log('success:' + JSON.stringify(res))
				uni.showToast({
					title: '支付成功',
					icon: 'none',
					mask: true,
					duration: 1000
				})
				setTimeout(() => {
					uni.redirectTo({
						url: '/pages_A/success/success'
					})
				}, 1000)
			},
			fail: function (err) {
				console.log('fail:' + JSON.stringify(err))
				uni.showToast({
					title: '支付失败请重试!',
					icon: 'none',
					mask: true,
					duration: 1000
				})

				setTimeout(() => {
					uni.redirectTo({
						url: '/pages_A/order/order?type=10'
					})
				}, 1000)
			}
		})
	}
	const indexlist = async () => {
		uni.showLoading({})
		await http
			.post('/srapi/home/yuyue', {
				id: id.value,
				coupon_id: cityStore.yh_id,
				ktime: cityStore.formatted[0],
				jtime: cityStore.formatted[1]
			})
			.then((res) => {
				console.log('返回值', res)
				detail.value = res.data
				riqi.value = res.riqi
				tprice.value = res.tprice
				zprice.value = res.zprice
				coupon_price.value = res.coupon_price
				yhprice.value = res.yhprice
				status.value = 1
				if (!price.value) {
					price.value = res.zprice
				}
				uni.hideLoading()
			})
	}

	onShow(() => {
		console.log('页面刷新')
		if (status.value == 2) {
			indexlist()
		}
	})
	onLoad(async (option) => {
		console.log('接收传参:', option)
		id.value = option.id
		await indexlist()
	})

	const to_guest = () => {
		uni.navigateTo({
			url: '/pages_A/guest/guest?type=2'
		})
	}
	const to_coupon = () => {
		status.value = 2
		uni.navigateTo({
			url: '/pages_A/coupon/coupon?type=2&price=' + price.value
		})
	}

	const to_text = (type) => {
		uni.navigateTo({
			url: '/pages_A/text/text?type=' + type
		})
	}
</script>

<style lang="less" scoped>
	.top {
		position: sticky;
		left: 0;
		top: 0;
		z-index: 9;
		width: 750rpx;
		box-sizing: border-box;
		padding: 30rpx;
		background: linear-gradient(0deg, #cdeafb 0%, #c0e6fc 30%);
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				position: relative;
				z-index: 2;
				width: 17rpx;
				height: 30rpx;
				padding: 15rpx 30rpx 15rpx 0;
			}
			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}
	}

	.con {
		padding: 30rpx;
		font-size: 28rpx;
		color: #333;
		background: linear-gradient(0deg, #f4f5f9 70%, #cdeafb 100%);
		.box {
			background: #fff;
			border-radius: 24rpx;
			padding: 30rpx;
			margin-bottom: 18rpx;
		}
		.box_title {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000;
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.box_title_text {
				flex: 1;
				text-align: right;
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
				.span {
					color: #2367fa;
				}
			}
		}
	}

	.info {
		.info_top {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_top_left {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #000000;
				.info_top_left_title {
					font-weight: 700;
				}
				.info_top_left_text {
					margin-left: 10rpx;
					font-weight: 500;
				}
			}
			.info_top_right {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #787878;
				.info_top_right_img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 10rpx;
				}
			}
		}
		.info_text {
			font-size: 24rpx;
			font-weight: 500;
			color: #000000;
			margin-bottom: 24rpx;
		}
		.info_btn {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			font-weight: 700;
			color: #2367fa;

			.info_btn_img {
				width: 24rpx;
				height: 24rpx;
				margin-left: 11rpx;
			}
		}
	}

	.tip {
		display: flex;
		align-items: center;
		padding: 20rpx 10rpx 30rpx;
		.tip_img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 13rpx;
		}
		.tip_title {
			font-size: 24rpx;
			font-weight: 500;
			color: #ff9600;
		}
	}

	.user {
		.user_nr {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f4f5f9;
			border-radius: 10rpx;
			padding: 30rpx;
			margin-bottom: 18rpx;
			.user_nr_title {
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.user_nr_del {
				font-size: 24rpx;
				font-weight: 500;
				color: #2367fa;
			}
		}
		.user_add {
			width: 190rpx;
			height: 84rpx;
			background: #2367fa;
			border-radius: 10rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #f4f5f9;
			display: flex;
			justify-content: center;
			align-items: center;
			.user_add_img {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}
	}

	.amount {
		.amount_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			.amount_top_left {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
				.span {
					color: #2367fa;
				}
			}
			.amount_top_right {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				display: flex;
				align-items: center;
				.amount_top_right_img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 11rpx;
				}
			}
		}
		.amount_list {
			margin-bottom: 20rpx;
			background: #f4f5f9;
			border-radius: 10rpx;
			padding: 0 30rpx;
			.amount_list_nr {
				padding: 30rpx 0;
				border-bottom: 1px solid #e6e7ec;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.amount_list_nr_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
		}
		.amount_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.amount_btn_left {
				font-size: 28rpx;
				font-weight: 500;
				color: #000000;
			}
			.amount_btn_right {
				font-size: 28rpx;
				font-weight: 700;
				color: #2367fa;
				display: flex;
				align-items: center;
				.amount_btn_right_img {
					width: 9rpx;
					height: 16rpx;
					margin-left: 11rpx;
				}
			}
		}
	}

	.notice {
		font-size: 28rpx;
		font-weight: 500;
		color: #787878;
		line-height: 42rpx;
		margin-bottom: 40rpx;
	}
	.agreement {
		font-size: 28rpx;
		font-weight: 500;
		color: #787878;
		line-height: 42rpx;
		.span {
			color: #1e80ff;
		}
	}

	.btn {
		margin-top: 60rpx;
		width: 500rpx;
		height: 115rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		.btn_box {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			background: #fff;
			padding: 15rpx 30rpx;

			padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05);
			.btn_box_left {
				.btn_box_left_title {
					display: flex;
					align-items: flex-end;
					font-size: 28rpx;
					font-weight: 500;
					color: #000000;
					margin-bottom: 15rpx;
					.span {
						font-size: 42rpx;
						font-weight: 700;
						color: #2367fa;
						margin-left: 10rpx;
					}
				}
				.btn_box_left_text {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
				}
			}
			.btn_box_right {
				width: 330rpx;
				height: 84rpx;
				background: #2367fa;
				border-radius: 42rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.btn_box_right_title {
					font-size: 32rpx;
					font-weight: 700;
					color: #f4f5f9;
				}
				.btn_box_right_text {
					font-size: 20rpx;
					font-weight: 500;
					color: #ffffff;
				}
			}
		}
	}

	.popup_box {
		background: #ffffff;
		border-radius: 24rpx;
		.popup_box_top {
			padding: 40rpx;
			font-size: 28rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
		}
		.popup_box_list {
			padding: 0 40rpx;

			.popup_box_list_nr {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
				margin-bottom: 20rpx;
				.popup_box_list_nr_zw {
					display: inline-block;
					width: 10rpx;
					height: 10rpx;
					background: #2468fb;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.span {
					color: #2468fb;
				}
			}
		}
		.popup_box_btn {
			padding: 30rpx;
			border-top: 1px solid #e6e6e6;
			font-size: 28rpx;
			font-weight: 500;
			text-align: center;
			color: #2468fb;
		}
	}
	//
</style>
